<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>address</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <style type="text/css">
        ul,
        li,
        p {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        ul {
            padding: 0 10px;
            background-color: white;
            margin-top: 10px;
        }
        
        li {
            padding: 10px 0;
            overflow: hidden;
            position: relative;
        }
        
        li:after {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
        }
        
        .message {
            width: 70%;
        }
        
        .message p {
            line-height: 30px;
        }
        
        .controlBtn {
            width: 30%;
        }
        
        .sex {
            margin: 0 20px 0 10px;
        }
        
        .controlBtn {
            line-height: 60px;
        }
        
        .controlBtn i {
            line-height: 60px;
        }
        
        .controlBtn i {
            margin-right: 20px;
        }
        
        .mui-bar.mui-bar-tab {
            height: 44px;
        }
        
        .mui-bar.mui-bar-tab p {
            text-align: center;
            font-size: 18px;
        }
        
        .mui-bar.mui-bar-tab .addBtn i {
            color: orange;
        }
        
        .control {
            line-height: 44px;
        }
        
        .mui-bar .addBtn {
            top: 0;
            bottom: 0;
            height: 44px;
            border: none;
        }
        
        .mui-btn,
        button,
        input[type=button],
        input[type=reset],
        input[type=submit] {
            vertical-align: middle;
        }
        
        ul {
            padding-bottom: 44px;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">我的收货地址</h1>
        <!--<span class="mui-pull-right control">管理</span>-->
    </header>
    <div class="mui-content" id="address">
        <ul class="addressList">
            <li v-for="item in dataObj.rows">
                <div class="mui-pull-left message">
                    <p class="mui-ellipsis addressBar">{{ item.building }}{{ item.doorplate }}</p>
                    <p class="msg">
                        <span class="name">{{ item.name }}</span>
                        <span class="sex" v-if="item.gender == 0">先生</span>
                        <span class="sex" v-if="item.gender == 1">女士</span>
                        <span class="phone">{{ item.phonenumber }}</span>
                    </p>
                </div>
                <div class="mui-pull-left controlBtn">
                    <!--删除-->
                    <i class="mui-icon mui-icon-trash mui-pull-right" sureMsg="确认删除此收货地址" v-on:click="btnFun(item.addressId,{'type':'del'},$event)"></i>
                    <!--编辑-->
                    <i class="mui-icon mui-pull-right mui-icon-compose" v-on:click="btnFun(item.addressId,{'type':'edit','url':'addAddress','title':'编辑收货地址'})"></i>
                </div>
            </li>
        </ul>
        <nav class="mui-bar mui-bar-tab">
            <button v-on:click="btnFun(null,{'type':'add','url':'addAddress','title':'新增收货地址'})" type="button" class="addBtn mui-btn mui-btn-block"><i class="mui-icon mui-icon-plus"></i>新增收货地址</button>
        </nav>
    </div>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/appServer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/commonVue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	console.log(router.address.list)
    var commonAll = new commonFun('address', {
        "getDataUrl": router.address.list,
        "delUrl": router.address.del
    }, true, 'addressId')
    commonAll.commonFormInit();
    commonAll.webviewShow();

    //		var vm = new Vue({
    //			el: '#address',
    //			data: {
    //				address: []
    //			},
    //			mounted: function() {
    //				this.init();
    //			},
    //			methods: {
    //				init: function() {
    //					mui.init({
    //						pullRefresh: {
    //							container: ".mui-content", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    //							down: {
    //								style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
    //								color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
    //								height: '90px', //可选,默认50px.下拉刷新控件的高度,
    //								range: '100px', //可选 默认100px,控件可下拉拖拽的范围
    //								offset: '45px', //可选 默认0px,下拉刷新控件的起始位置
    //								auto: true, //可选,默认false.首次加载自动上拉刷新一次
    //								callback: this.getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据							}
    //							}
    //						}
    //					});
    //					//添加newId自定义事件监听
    //					window.addEventListener('pullRefresh', function(event) {
    //						location.reload();
    //					});
    //				},
    //				openWin: function(id, url, type) { // 新打开页面 (带导航头)
    //					var aId = id,
    //						urlId = url,
    //						urlName = urlId + ".html",
    //						title = {},
    //						img = {
    //							base64Data: ''
    //						};
    //
    //					if(type == 'edit') {
    //						topTitle = {
    //							title: { //标题配置
    //								text: "编辑收货地址", //标题文字
    //							},
    //							back: { //左上角返回箭头
    //								image: img
    //							}
    //						}
    //					} else {
    //						topTitle = {
    //							title: { //标题配置
    //								text: "新增收货地址", //标题文字
    //							},
    //							back: { //左上角返回箭头
    //								image: img
    //							}
    //						}
    //					};
    //					var webview = mui.openWindowWithTitle({
    //						url: urlName,
    //						id: urlName,
    //						extras: {
    //							rid: aId //扩展参数
    //						},
    //						show: {
    //							autoShow: true,
    //							aniShow: "auto",
    //						},
    //						waiting: {
    //							autoShow: true,
    //							title: '正在加载...'
    //						}
    //					}, topTitle)
    //				},
    //				getData: function() {
    //					mui.ajax(server + '/address/list', {
    //						dataType: 'json',
    //						success: function(res) {
    //							console.log(res)
    //							vm.address = res.rows
    //						}
    //					});
    //					mui('.mui-content').pullRefresh().endPulldown(); // 下拉结束   初始化下拉
    //				},
    //				ajaxFun: function(url, id) {
    //					mui.ajax(url, {
    //						dataType: 'json',
    //						data: {
    //							addressId: id
    //						},
    //						success: function(res) {
    //							console.log(res);
    //							vm.getData();
    //							mui.toast('删除成功');
    //						}
    //					})
    //				},
    //				clickFun: function(id, type, url) {
    //					var rid = id, // 地址 id
    //						type = type, // 按钮事件类型
    //						aUrl = url; // 提交地址/新开页面地址
    //					console.log(rid + '---' + aUrl + '---' + type);
    //					switch(type) {
    //						case 'del': // 删除
    //							mui.confirm('', '确认删除该条收货地址', ['取消', '确认'], function() { // 删除操作询问框 -> 防止误操作
    //								vm.ajaxFun(server + '/address/delete', rid);
    //							}, 'div')
    //							break;
    //						case 'edit': // 编辑
    //						case 'toAdd': // 新增
    //							vm.openWin(rid, aUrl, type)
    //							break;
    //						default:
    //							break;
    //					}
    //				}
    //			}
    //		})
</script>

</html>